import React from "react";
import ReactDOM from "react-dom";
import "./index.css";
import MyApp from "./MyApp";
import Pinlun from "./pinlun";
import App from './App'
// const title = React.createElement("h1", null, "脚手架hello react ");
// ReactDOM.render(title, document.getElementById("root"));

// 通过jsx的方式渲染一个页面

const age = 18;

const title = <h1 className="title">使用jsx的方式渲染一个页面,年龄：{age}</h1>;

ReactDOM.render(title, document.getElementById("root"));

// react的条件渲染
const isLoading = true;
const loadData = () => {
  if (isLoading) {
    return <div>loading...</div>;
  }
  return <div>数据加载完毕</div>;
};

const title2 = <h2>条件渲染：{loadData()}</h2>;
ReactDOM.render(title2, document.getElementById("root"));

// reace的列表渲染

const songs = [
  { id: 1, name: "jasdfasdf" },
  { id: 2, name: "jasdfasdf" },
  { id: 3, name: "jasdfasdf" }
];

const list = (
  <ul>
    {songs.map(item => (
      <li className="colorLi" key={item.id}>
        <span>{item.id}</span>
        <span>{item.name}</span>
      </li>
    ))}
  </ul>
);

function getDatas(message) {
  console.log("来自子组件的数据" + message);
}

// ReactDOM.render(list, document.getElementById("root"));
// ReactDOM.render(<MyApp />, document.getElementById("root"));
// ReactDOM.render(<Pinlun name="父组件向子组件传入的信息" getDatas={getDatas} />, document.getElementById("root"));
ReactDOM.render(<App />, document.getElementById("root"));
